<template>
  <div>
    <div class="table">
      <Table ref="selection" size="small" :columns="columns" :data="discussData" @on-selection-change="onSelectChange"></Table>
    </div>
    <div class="table-bottom">
      <div class="table-btns left-btns">
        <Button :disabled="!(disableId.length>0)" type="primary" icon="md-checkmark" @click="enableHandle()">启用</Button>
        <Button :disabled="!(enableId.length>0)" type="primary" icon="ios-snow" @click="disableHandle()">冻结</Button>
        <Button :disabled="!(selectedId.length>0)" type="primary" icon="ios-trash-outline" @click="deleteHandle(selectedId)">删除</Button>
      </div>
      <div class="table-pages">
        <Page
          :total="pageTotal"
          show-sizer
          show-total
          size="small"
          :page-size-opts="pageSizeOpts"
          @on-change="pageChange"
          @on-page-size-change="pageSizeChange"
        />
      </div>
    </div>
  </div>
</template>
<script>

import { getDiscussList, deleteDiscuss, enableOrDisableDiscuss} from '@/api/server.js';
export default {
  components: {
    
  },
	created(){
		
	},
  mounted() {
    this.getDiscussListFunc();
  },
  data() {
    return {
      enableId: [],
      disableId: [],
      selectedId: [],
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center',
          fixed: 'left'
        },
        {
          title: '姓名',
          key: 'name'
        },
        {
          title: '电话',
          tooltip: true,
          key: 'tel'
        },
        {
          title: '邮箱',
          key: 'email',
          
        },
        {
          title: '内容',
          key: 'content',
          tooltipTheme: 'light',
          tooltip: true,
        },
        {
          title: '状态',
          key: 'enable',
          render: (h,params) => {
            return h('span',
            {
              style: {
                border:'1px solid #19be6b',
                borderColor: params.row.enable === '1'? '#19be6b' : '#c5c8ce',
                color: params.row.enable === '1'? '#19be6b' : '#c5c8ce',
                fontSize: '10px',
                padding: '1px 5px',
                borderRadius:"3px",
              }
            },
            params.row.enable === '1'? '启用' : '冻结'
            )
          }
        },
        {
          title: '留言日期',
          key: 'pubtime',
        }
      ],
      discussData: [],
      pageParam: {
        currentPage:1,
        pageSize:10
      },
      pageTotal:0,
      pageSizeOpts: [10,20,50,100],
    }
  },
	methods:{
    getDiscussListFunc() {
      getDiscussList(this.pageParam).then(res => {
        this.pageTotal = res.data.len;
        this.discussData = res.data.list;
        this.onSelectChange([])
      })
    },
    onSelectChange(data) {
      let selectedId = [];
      let enableId = [];
      let disableId = [];
      data.forEach(element => {
        selectedId.push(element.id);
        if(element.enable === "1") {
          enableId.push(element.id)
        }else {
          disableId.push(element.id)
        }
      });
      this.selectedId = selectedId;
      this.enableId = enableId;
      this.disableId = disableId;
    },
    enableHandle() {
      if(this.disableId.length>0) {
        if(this.enableId.length === 0) {
          enableOrDisableDiscuss({type:'1',ids:this.disableId}).then( res => {
            if(res.data) {
              $Message.success('启用成功');
              this.getDiscussListFunc();
            }else {
              $Message.error('启用失败');
            }
          })
        }else {
          $Message.warning('已启用的留言不能再启用，请重新选择');
        }
      }
    },
    disableHandle() {
      if(this.enableId.length>0) {
        if(this.disableId.length === 0) {
          enableOrDisableDiscuss({type:'0',ids:this.enableId}).then( res => {
            if(res.data) {
              $Message.success('冻结成功');
              this.getDiscussListFunc();
            }else {
              $Message.error('冻结失败');
            }
          })
        }else {
          $Message.warning('已冻结的留言不能再冻结，请重新选择');
        }
      }
    },
    deleteHandle(ids = []) {
      this.$Modal.confirm({
        title:'删除提示',
        content:`确定删除选中留言吗？`,
        onOk: () => {
          deleteDiscuss({ids:ids}).then( res=> {
            if(res.data) {
              $Message.success('删除成功');
              this.getDiscussListFunc();
            }else {
              $Message.error('删除失败');
            }
          })
        },
        onCancel: () => {

        },

      })
      
    },
    pageSizeChange(pageSize) {
      this.pageParam.pageSize = pageSize;
      this.getDiscussListFunc()
    },
    pageChange(page) {
      this.pageParam.currentPage = page;
      this.getDiscussListFunc()
    },
	},
};
</script>

<style lang="less" scoped>
.table {
  border: 1px solid #eaecf1;
  border-bottom: none;
  margin-bottom: 16px;
  /deep/ .ivu-table-wrapper {
    border-bottom: none;
  }
}
.table-bottom {
  display: flex;
  justify-content: space-between;
  .table-btns {

  }
}
</style>